<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import router from "@/router/index.js";
import {getMsgList} from "@/api/getData.js";

// ref 对象用于存储响应式数据
const tableData = ref([]);
let currentPage = 1; // 当前页数
let pageSize = 5; // 每页显示条数
let total = 0; // 数据总条数，需根据实际情况设置

// 在 mounted 钩子中调用数据获取函数
onMounted(() => {
  getMsgData(); // 调用获取数据的函数
});

// 模拟获取数据的函数
const getMsgData = () => {
  getMsgList().then(response => {
    tableData.value = response.data; // 更新表格数据
    total = response.total; // 更新数据总条数
  })
};
</script>




<template>

  <div class="container ">
    <div class="hheader">
      <div class="header">
        <img src="@/assets/image/list/board_title.gif" width="115" height="30" alt="Board Title" align="left">
        <!-- Board title copy is commented out in original -->
        <img src="@/assets/image/list/board_title_image.gif" width="178" height="88" alt="Board Title Image">
        <!-- < img src="../../../assets/Message/list/board_title_copy.gif" width="556" height="15" alt="Board Title Copy"> -->
      </div>

      <div class="board-title" style="flex:1 ;width: 100%">

        <img src="@/assets/image/list/board_title_top_copy.gif" width="342" height="56" alt="Board Title Top Copy">
      </div>
    </div>
    <div>
      <table width="100%" border="0" cellspacing="3" cellpadding="0">
        <tr style="background-color: #000000">
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="50%" height="1"></td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
        </tr>
      </table>
    </div>
    <div class="votetable" >
      <table class="board-table">
        <thead>
        <tr>
          <th><img src="@/assets/image/list/board_title_on.gif" width="16" height="10" alt="On"></th>
          <th><img src="@/assets/image/list/board_title_subject.gif" width="40" height="12" alt="Subject"></th>
          <th><img src="@/assets/image/list/board_title_name.gif" width="32" height="10" alt="Name"></th>
          <th><img src="@/assets/image/list/board_title_hit.gif" width="16" height="10" alt="Hit"></th>
          <th><img src="@/assets/image/list/board_title_date.gif" width="25" height="10" alt="Date"></th>
          <th><img src="@/assets/image/list/board_title_file.gif" width="19" height="10" alt="File"></th>
        </tr>
        </thead>

      </table>
      <div>

        <el-table :data="tableData" :show-empty="false" style="width: 100% ;display: flex">
          <el-table-column  label="On" prop="col1" width="%">
            <template slot-scope="scope">
              <div class="cell-content"><span>{{ scope.row.col1 }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="Subject" prop="col2" width="%">
            <template slot-scope="scope">
              <div class="cell-content">
                <img src="@/assets/image/list/arrow.gif" alt=""> {{ scope.row.col2 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="Column 3" prop="col3" width="%">
            <template slot-scope="scope">
              <div class="cell-content"><span>{{ scope.row.col3 }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="Column 4" prop="col4" width="%">
            <template slot-scope="scope">
              <div class="cell-content"><span>{{ scope.row.col4 }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="Column 5" prop="col5" width="%">
            <template slot-scope="scope">
              <div class="cell-content"><span>{{ scope.row.col5 }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="Column 6" width="19%">
            <template slot-scope="scope">
              <div class="cell-content"><img src="@/assets/image/list/image_01.gif" alt=""></div>
            </template>
          </el-table-column>

        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>


      </div>


    </div>
    <div class="lastb">
      <div class="pagination">
        <img src=" @/assets/image/list/image_next.gif" width="28" height="34" alt="Next">
        <div class="page-numbers">
          <img src="@/assets/image/list/next.gif" width="35" height="11" alt="Next Page">
          12345678910
          <img src="@/assets/image/list/prev.gif" width="35" height="11" alt="Previous Page">
        </div>
      </div>

      <div class="footer">
        <img src="@/assets/image/list/image_home.gif" width="32" height="39" alt="Home">
        <img src="@/assets/image/list/search.gif" width="30" height="37" alt="Search">
        <img src="@/assets/image/list/list.gif" width="28" height="36" alt="List">
      </div>
    </div>
  </div>
</template>

<style scoped>
.hheader{
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.container {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  background-color: #FFFFFF;
  flex: 1;
}

.header {
  text-align: center;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */

}

.board-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin: 20px 0;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table th,
.board-table td {
  text-align: center;
  padding: 10px;
  background-color: #CCCCCC;
}

.cell-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/image/list/surface.gif');
  height: 20px;
  padding: 0 10px;
}

.footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.lastb{
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>